import Title2 from '@/assets/ready-1-1.png';
import Title from '@/assets/ready-1.png';
import Product from '@/assets/ready-2.png';
import Text from '@/assets/ready-3.png';
import SubTitle from '@/assets/ready-4.png';
import Bg from '@/assets/ready-5.jpg';

import '@animxyz/core';
import { XyzTransitionGroup } from '@animxyz/react';
import { useEffect } from 'react';
import { history } from 'umi';

export default function Page() {
  useEffect(() => {
    const s = setTimeout(() => {
      history.replace('/confirm');
    }, 4000);

    return function () {
      clearTimeout(s);
    };
  }, []);

  return (
    <>
      <XyzTransitionGroup
        appear
        appearVisible
        xyz="fade up-2 appear-stagger"
        style={{
          backgroundImage: `url(${Bg})`,
        }}
        className=" bg-cover bg-no-repeat min-h-screen relative overflow-hidden pt-[150px] flex flex-col items-center"
      >
        {/* title */}
        <h1
          className=" w-[368px] h-[86px] bg-cover relative left-[40px]"
          style={{
            backgroundImage: `url(${Title})`,
          }}
        >
          <p
            className=" w-full h-full absolute left-0  top-0 bg-cover"
            style={{
              backgroundImage: `url(${Title2})`,
            }}
          ></p>
        </h1>

        <h3
          className=" w-[384px] h-[96px] bg-cover mt-4"
          style={{
            backgroundImage: `url(${SubTitle})`,
          }}
        ></h3>

        {/* Product */}
        <div
          xyz="fade-100% small-50% stagger"
          className="w-[480px] h-[610px] bg-cover mt-6"
          style={{
            backgroundImage: `url(${Product})`,
          }}
        ></div>

        {/* Text */}
        <div
          className="w-[398px] h-[188px] bg-cover mt-6"
          style={{
            backgroundImage: `url(${Text})`,
          }}
        ></div>
      </XyzTransitionGroup>
    </>
  );
}
